<template>
  <div>
    <el-card>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="5">
          <el-input v-model="fileName" placeholder="请输入导出后的文件名称"></el-input>
        </el-col>
        <el-col>
          <el-button type="primary" :loading="isLoading" @click="exportTableZip">导出zip格式表格</el-button>
        </el-col>
      </el-row>
      <my-table :value="tableData"></my-table>
    </el-card>
  </div>
</template>

<script>
import MyTable from '../tab/component/Table.vue'
export default {
  data() {
    return {
      fileName: 'zip',
      isLoading: false,
      tableData: [],
      online: {}
    }
  },
  components: {
    MyTable
  },
  methods: {
    async getTableList() {
      if(!this.$store.state.method) {
        this.online.method = false
      }else {
        this.online.method = true
      }
      const res = await this.$http.get('edit/article', { params: this.online })
      res.response.forEach(item => {
        if(!this.online.method) {
          item.date = item.date.$date.split('T')[0]
          return
        }
        item.date = item.date.split('T')[0]
      })
      this.tableData = res.response
    },
    exportTableZip() {
      this.isLoading = true
      import('@/assets/js/Export2Zip').then(zip => {
        const tHeader = ['Id', 'Date', 'Title', 'Author', 'Importance', 'Readings', 'Status']
        const filterVal = ['id', 'date', 'title', 'author', 'importance', 'readings', 'status']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        zip.export_txt_to_zip(tHeader, data, this.fileName, this.fileName)
      })
      this.isLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
  created() {
    this.getTableList()
  }
}
</script>

<style>
</style>
